<template>
    <view class="rx-center">
        <view class="rx-title" v-if="portal.titleflg == true && portal.title !=''">{{getI18nTitleVal(portal, 'title')}}</view>
        <swiper class="rx-swiper" :indicator-dots="true" :autoplay="false" :circular="true">
            <swiper-item v-for="item in processList">
                <view class="rx-application">
                    <view class="rx-application-en" @click="portalSkip(obj)" v-for="obj in item">
                        <view class="rx-application-icon" v-if="portal.stylize=='img'">
                            <image v-if="obj.imgId" :src="imageUrl(obj.imgId)" alt="photo"/>
                            <image v-else src="@/static/mobile.png"/>
                        </view>
                        <view v-else :style="{'background':obj.bgColor}" class="rx-application-icon">
                            <i :class="['iconfont',obj.icon]"></i>
                            <view class="rx-myTasks" v-if="obj.routeName =='myTasks'">{{ myTaskNumber>99?'99+':myTaskNumber }}</view>
                        </view>
                        <span class="rx-application-span">{{ getI18nTitleVal(obj, 'title') }}</span>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
/*
**流程管理
 */
import './RxGatewayCss.css'
import GatewayApi from "@/api/Gateway/GatewayApi";

export default {
    name: "RxProcess",
    data() {
        return {
            myTaskNumber: 0,
            processList: [],
        }
    },
    inject: ['portalJump'],
    props: {
        portal: Object,
    },
    created() {
        this.init()
        this.myTasks()
    },
    methods: {
        init() {
            let list = []
            this.portal.items.forEach((res, index) => {
                list.push(res)
                if (list.length == 10 || index == this.portal.items.length - 1) {
                    this.processList.push(list);
                    list = [];
                }
            })
        },
        portalSkip(item) {
            this.portalJump(item)
        },
        getFilePath(fileId) {
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId;
        },
        //获取待办数量
        myTasks() {
            GatewayApi.getMyTaskCount().then(res => {
                this.myTaskNumber = res
            })
        }
    }
}
</script>

<style scoped>
.rx-center {
    border-radius: .5rem;
    background: #fff;
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
}

.rx-title {
    font-size: 1rem;
    padding: 0.7rem 1rem;
    letter-spacing: 0rem;
    color: rgba(51, 51, 51, 1);
}

.rx-myTasks{
    position: absolute;
    top: -0.5rem;
    right: -1.3rem;
    font-size: 0.6rem;
    background: rgba(246, 83, 76, 1);
    padding:0.2rem 0.4rem;
    border-radius: 1rem;
    color: white;
    border: 2px solid white;
    width: 1rem;
    text-align: center;
}
.rx-swiper {
    height: 12rem !important;
}
</style>
